<template>
  <van-tabbar v-model="active">
    <!-- <van-tabbar-item to="/" name="home" icon="home-o">
      <span>首页</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="icon-home-sel"></GeekIcon>
        <GeekIcon v-else name="icon-home"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/question" name="search" icon="search">
      <span>问答</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="icon-qa-sel"></GeekIcon>
        <GeekIcon v-else name="icon-qa"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/video" name="friends" icon="friends-o">
      <span>视频</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="icon-video-sel"></GeekIcon>
        <GeekIcon v-else name="icon-video"></GeekIcon> </template
    ></van-tabbar-item>
    <van-tabbar-item to="/user" name="setting" icon="setting-o">
      <span>我的</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="icon-mine-sel"></GeekIcon>
        <GeekIcon v-else name="icon-mine"></GeekIcon> </template
    ></van-tabbar-item> -->

    <van-tabbar-item
      v-for="(item, index) in tabbarItem"
      :key="index"
      :to="item.path"
      :name="item.name"
    >
      <span>{{ item.text }}</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" :name="item.icons[0]"></GeekIcon>
        <GeekIcon v-else :name="item.icons[1]"></GeekIcon> </template
    ></van-tabbar-item>
  </van-tabbar>
</template>

<script>
import GeekIcon from "@/components/geek-icon.vue";

export default {
  name: "AppTabbar",
  data() {
    return {
      active: "home",
      tabbarItem: [
        {
          path: "/",
          name: "home",
          text: "首页",
          icons: ["home-sel", "home"]
        },
        {
          path: "/question",
          name: "question",
          text: "问答",
          icons: ["qa-sel", "qa"]
        },
        {
          path: "/video",
          name: "video",
          text: "视频",
          icons: ["video-sel", "video"]
        },
        {
          path: "/user",
          name: "user",
          text: "我的",
          icons: ["mine-sel", "mine"]
        }
      ]
    };
  },
  components: {
    GeekIcon
  }
};
</script>

<style lang='less' scoped>
.van-tabbar {
  background: #f7f8fa;
  position: static;
}
::v-deep .van-tabbar-item--active {
  color: #fc6627;
  background-color: #f7f8fa;
}
::v-deep .van-tabbar-item__icon {
  font-size: 20px;
}
::v-deep .van-tabbar-item__text {
  font-size: 10px;
}
</style>
